<template>
  <view class="wh_750 pageHeight flex flex-column align-center bg_F5F5F5">
    <s-header-title ref="headerTitle"
                    title="年龄排行调整"
                    isDisplayBack
                    is-fixed
                    zIndex="10"
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight"
    >
    </s-header-title>
    <view :style="{height:page.headerHeight+'px'}"></view>
    <view class="hW_20"></view>
    <view class="wh_750 color_9F9F9F fs_24 fw_500 flex align-center justify-center">
      可长按右侧图标拖动排序 排行越靠上年龄越大
    </view>
    <view class="wh_750 flex">
      <view class="wh_106">
        <view class="wh_106 mt_32 hW_160 flex flex-column align-center justify-center"
              v-for="(item,index) in page.list"
              :key="index"
        >
          <view class="fs_60 color_FF4206 fw_bold">{{ index + 1 }}</view>
          <view class="color_4E4E4E fs_16 fw_500 mt_5">年龄排行</view>
        </view>
      </view>
      <view class="wh_644">
        <l-drag class="wh_620"
                :list="page.list"
                :grid-height="setHeight(192)"
                longpress
                :column="1"
                @change="drapChange"
                @touchStart="touchStart"
        >
          <template #grid="{active, index,oldindex, content}">
            <view class="wh_620 hW_160 bg_FFFFFF mt_32 flex align-center justify-between" style="border-radius: 8rpx;">
              <s-avatar class="ml_29"
                        :src="content.head.indexOf('http') != -1 ? content.head : `${nc_image}${content.head}`"
                        :width="112"
                        :height="112"></s-avatar>
              <view class="wh_420 flex flex-column ml_15">
                <view class="flex align-center">
                  <view class="fs_30 fw_500 color_4B4B4B">{{ content.surname }}{{ content.name }}</view>
                  <view class="fs_16 fw_500 wh_66 hW_30 bg_4787FF color_FFFFFF ml_17 flex align-center justify-center"
                        style="border-radius: 20rpx">
                    {{ content.gxname }}
                  </view>
                </view>
                <view class="flex align-center mt_2">
                  <image class="wh_21 hW_23"
                         :src="content.sex == 2 ? `${IMG_URL}/index/user_women.png`:`${IMG_URL}/index/user_men.png`"
                  ></image>
                  <view class="fs_24 fw_500 color_787878 ml_5" v-if="!!content.age">{{ content.age }}周岁</view>
                </view>
                <view class="flex align-center mt_12" v-if="content.is_show_old == 1">
                  <view class="wh_107 hW_38 flex align-center justify-center fs_17 color_696969 fw_500 bg_E0E0E0"
                        style="border-radius: 20rpx"
                        :style="{
                          background:content.is_older == 1 ? '#FF4206 !important':'#E0E0E0 !important',
                          color:content.is_older == 1 ? '#FFFFFF !important':'#696969 !important'
                        }"
                        @click.stop="setSize(oldindex,content.is_older)"
                  >
                    比{{ content.is_show_text }}大
                  </view>
                  <view class="wh_107 hW_38 flex align-center justify-center fs_17 color_696969 fw_500 bg_E0E0E0 ml_15"
                        style="border-radius: 20rpx"
                        :style="{
                          background:content.is_older == 2 ? '#FF4206 !important':'#E0E0E0 !important',
                          color:content.is_older == 2 ? '#FFFFFF !important':'#696969 !important'
                        }"
                        @click.stop="setSize(oldindex,content.is_older)"
                  >
                    比{{ content.is_show_text }}小
                  </view>
                </view>
              </view>
              <image class="wh_26 hW_26 mr_20" :src="`${IMG_URL}/index/learnByHeart_toggle.png`"></image>
            </view>
          </template>
        </l-drag>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import SAvatar from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  const page = reactive({
    headerHeight: 0,
    options: {},
    list: [],
    selectInfo: {},
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  const setHeight = (number) => {
    return uni.upx2px(number);
  };
  onLoad((options) => {
    page.options = options;
    getList();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function getList() {
    const { data } = await sheep.$api.genealogy.getGenealogyMemberSameLevel({
      relation_id: page.options.id,
    });
    page.list = data;
  }

  async function drapChange(e) {
    console.log(e);
    let ids = '';
    e.forEach(item => {
      ids += item.content.id + ',';
    });
    const { code } = await sheep.$api.genealogy.updateGenealogyRelationSort({
      ids,
      id: page.selectInfo.id,
    });
    if (code == 1) {
      await getList();
    }
  }

  function touchStart(e) {
    page.selectInfo = e;
  }

  async function setSize(index, value) {
    console.log(index, value);
    page.list[index].is_older = value == 1 ? 2 : 1;
    const { data, code } = await sheep.$api.genealogy.updateGenealogyUserOlderValue({
      relation_id: page.list[index].id,
      is_older: value == 1 ? 2 : 1,
    });
    page.list[index].gxname = data.gxname;
    if (code == 1) {
      await getList();
    }
  }
</script>

<style lang="scss">

</style>
